<template>
  <div class="box1" v-loading="loading">
    <div class="bgBlock">
      <el-divider content-position="left"><h2>基本信息</h2></el-divider>
      <div class="fontInfo">
        <p style="width: 25%">
          任务名称：<span>{{ data.taskName }} </span>
        </p>
        <p style="width: 25%">
          任务描述：<span>{{ data.dsc || "空" }} </span>
        </p>
        <p style="width: 25%">
          任务源：<span
            >{{ data.start }}<i class="el-icon-right"></i>{{ data.end }}
          </span>
        </p>
      </div>
    </div>
    <div class="bgBlock">
      <el-divider content-position="left"><h2>源库及目标库设置</h2></el-divider>
      <div class="fontInfo">
        <p style="width: 40%" v-if="dbData.source && dbData.sink">
          源库名称：<span>{{ data.sourceName || "空" }} </span>
        </p>
        <p style="width: 40%">
          源库主机名：<span>{{ dbData.source && dbData.source.ip }} </span>
        </p>
        <p style="width: 40%">
          源库端口：<span>{{ dbData.source && dbData.source.port }} </span>
        </p>
        <p style="width: 40%">
          源库用户名称：<span>{{ dbData.source && dbData.source.uname }} </span>
        </p>
        <el-divider></el-divider>
        <p style="width: 40%">
          目标库名称：<span>{{ data.sinkName || "空" }} </span>
        </p>
        <p style="width: 40%">
          目标库主机名：<span>{{ dbData.sink && dbData.sink.ip }} </span>
        </p>
        <p style="width: 40%">
          目标库端口：<span>{{ dbData.sink && dbData.sink.port }} </span>
        </p>
        <p style="width: 40%">
          目标库用户名称：<span>{{ dbData.sink && dbData.sink.uname }} </span>
        </p>
      </div>
    </div>

    <div class="bgBlock">
      <el-divider content-position="left"><h2>选择指定对象</h2></el-divider>
      <div class="fontInfo">
        <el-table
          :data="tableData"
          height="300px"
          style="width: 100%; margin-top: 15px"
        >
          <el-table-column prop="sourceName" label="源实例名"></el-table-column>
          <el-table-column prop="sinkName" label="目标实例名"></el-table-column>
          <el-table-column prop="sourceTable" label="源表"></el-table-column>
          <el-table-column prop="sinkTable" label="目标表"></el-table-column>
          <el-table-column prop="id" label="主键id" />
          <el-table-column prop="time" label="时间字段" />
        </el-table>
      </div>
    </div>
    <div class="bgBlock" v-if="data.monitorStatus && data.monitorConf">
      <el-divider content-position="left"><h2>预检查</h2></el-divider>
      <div class="fontInfo">
        <p style="width: 50%">
          任务调度名称：<span>{{ data.monitorConf.jobName }} </span>
        </p>
        <p style="width: 50%">
          任务分组：
          <template v-for="dict in dict.type.sys_job_group">
            <span
              :key="dict.value"
              v-if="data.monitorConf.jobGroup == dict.value"
              >{{ dict.label }}
            </span>
          </template>
        </p>
        <p style="width: 50%">
          调用方法：<span>{{ data.monitorConf.invokeTarget }} </span>
        </p>
        <p style="width: 50%">
          cron表达式：<span>{{ data.monitorConf.cronExpression }}</span>
        </p>
        <p style="width: 50%">
          执行策略：
          <span v-if="data.monitorConf.misfirePolicy == 1">立即执行</span>
          <span v-if="data.monitorConf.misfirePolicy == 2">执行一次</span>
          <span v-if="data.monitorConf.misfirePolicy == 3">放弃执行</span>
        </p>
      </div>
    </div>
    <div class="radioBox">
      <p>
        创建后运行模式：
        <el-radio-group v-model="data.strategy">
          <el-radio
            v-for="dict in dict.type.task_strategy"
            :key="dict.value"
            :label="dict.value"
            >{{ dict.label }}</el-radio
          >
        </el-radio-group>
      </p>
    </div>
  </div>
</template>
<script>
import Vue from "vue";
import { listDatasourceInfo } from "@/api/console/datasourceInfo";

export default {
  components: {},
  name: "HelloWorld5",
  dicts: ["task_strategy", "sys_job_group"],
  props: ["data"],
  data() {
    return {
      form: {
        strategy: "2",
      },
      countmodeInfo: [],
      taskmodeInfo: [],
      tableData: [],
      loading: false,
      totalData: {},
      dbData: {},
    };
  },
  created() {
    this.loading = true;
    if (!this.$props.data.strategy) {
      Vue.set(this.$props.data, "strategy", "2");
    }
    if (this.$props.data.taskTables) {
      this.tableData = this.$props.data.displayTable;
      delete this.$props.data.displayTable;
    }
  },
  async mounted() {
    let that = this;
    const dictItem = await this.getDicts("database_datatype");
    const example = dictItem.data.filter((f) => f.dictLabel == "实例");
    const sourceInfo = {
      type: that.$props.data.start,
      dataType: example[0].dictValue,
      startNum: 0,
      pgSize: 999,
    };
    let sourceData = await listDatasourceInfo(sourceInfo);
    sourceInfo.type = that.$props.data.end;
    let sinkData = await listDatasourceInfo(sourceInfo);
    sourceData = sourceData.rows.find(
      (f) => f.dataSourceName == this.$props.data.sourceName
    );
    sinkData = sinkData.rows.find(
      (f) => f.dataSourceName == this.$props.data.sinkName
    );
    if (sourceData && sinkData) {
      this.dbData = {
        source: sourceData,
        sink: sinkData,
      };
    }
    this.loading = false;
  },
  methods: {
    prev() {
      this.$emit("clickPrev");
    },
  },
};
</script>

<style lang="scss" scoped>
.box1 {
  margin: 40px auto;

  .bgBlock {
    // border: 1px solid #dcdfe6;
    width: 100%;
    margin: 20px 0;
    padding: 15px;
    border-radius: 5px;
    box-shadow: 0px 0px 5px 1px #ddd;
  }

  h2 {
    font-weight: 700;
    font-size: 20px;
    color: rgb(64, 158, 255);
  }

  span {
    font-weight: 500;
    font-size: 16px;
  }

  .fontInfo {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    padding: 0 10px;
    font-size: 14px;
    color: #606266;
    font-weight: 700;
    // justify-content: space-between;
    font-size: 16px;
    p {
      width: 25%;
    }
  }

  .radioBox {
    text-align: right;
    font-weight: 700;

    p {
      margin-bottom: 0;
    }
  }
}

.el-col-1 {
  margin-top: 5px !important;
}
.mybtn {
  margin: 0 auto;
  margin-left: 40%;
}
</style>
